<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition template="layout.xhtml">
        <ui:define name="body">
            <section id="gap" >

            </section >
            <section >
                <div class="container">
                    <div class="play row">
                        <div class="col-md-12">
                            <p:messages autoUpdate="true" />
                            <h:form id="formresultado">
                                <h1>Resultado Jogo</h1>
                                <h:inputHidden id="ticket" value="#{managerResultado.ticket}" />
                                <p:panel styleClass="col-md-12">
                                    <div class="col-md-12">
                                        <p:outputLabel value="#{languagem['jogo.loteria']}" styleClass="col-md-2"/>
                                        <p:autoComplete id="autocompleteloteria" required="true" 
                                                        value="#{managerResultado.loteria}" completeMethod="#{managerAutocomplete.loterias}" var="lot"
                                                        itemLabel="#{lot.nome}" itemValue="#{lot}" converter="conversorloteria"
                                                        styleClass="col-md-10" dropdown="true">
                                            <p:ajax event="itemSelect" update="@form" process="@form" />
                                        </p:autoComplete>
                                        <p:outputLabel value="#{languagem['jogo']}" styleClass="col-md-2"/>
                                        <p:autoComplete id="autocompletejogo"
                                                        value="#{managerResultado.jogo}" 
                                                        completeMethod="#{managerResultado.pesquisarPorLoteria}" var="jog"
                                                        itemLabel="#{jog.dataJogo}" itemValue="#{jog}" converter="conversorjogo"
                                                        styleClass="col-md-10" dropdown="true">
                                        </p:autoComplete>
                                        
                                        <p:outputLabel value="#{languagem['loteria.existeMultiplicador']}" styleClass="col-md-2"/>
                                        <p:inputText value="#{managerResultado.multiplicador}" styleClass="col-md-10" />
                                        

                                        <p:outputLabel value="#{languagem['resultado']}" styleClass="col-md-2"/>

                                        <c:forEach var="t" begin="1" end="1" step="1">
                                            <div id="linha-#{t}" class="linha col-md-3" >
                                                <div class="numlinha col-md-3">
                                                    <h4>#{t}</h4>
                                                </div>
                                                <div id="choosen-#{t}" class="choose">
                                                    <p>#{languagem['escolha']} <span id="num-#{t}"></span></p>
                                                </div>
                                                <div id="numeros">
                                                    <c:forEach var="l" begin="1" end="#{managerResultado.loteria.qtdNumeros}" step="1">
                                                        <div data-table='#{t}' data-value='#{l}'>#{l}</div>
                                                    </c:forEach>  
                                                </div>
                                                <div id="choosebe-#{t}"  class="choose">
                                                    <p>#{languagem['escolha']} <span id="be-#{t}"></span></p>
                                                </div>
                                                <div id="bolaextra">
                                                    <c:forEach var="b" begin="1" end="#{managerResultado.loteria.qtdBolaExtra}" step="1">
                                                        <div data-table='#{t}' data-value='#{b}'>#{b}</div>
                                                    </c:forEach>                                
                                                </div>
                                            </div>
                                        </c:forEach>

                                        <div class="buttonAction col-md-12">
                                            <p:commandButton value="#{languagem['salvar']}"  styleClass="button-green"
                                                             onclick="setTicket();" 
                                                             update="@form" process="@form"
                                                             actionListener="#{managerResultado.salvar()}"/>
                                        </div>
                                        <p:dataTable styleClass="col-md-12" value="#{managerResultado.resultadoLinhas}" var="rl">
                                            <f:facet name="header">
                                                Apostadores
                                            </f:facet>
                                            <p:column headerText="Apostador">
                                                #{rl.linha.aposta.cliente.nome}
                                            </p:column>
                                            <p:column headerText="Números Jogados">
                                                #{rl.linha.numero}
                                            </p:column>
                                            <p:column headerText="Bola Extra">
                                                #{rl.linha.bolasExtra}
                                            </p:column>
                                            <p:column headerText="Multiplicador">
                                                #{rl.linha.aposta.multiplicador}
                                            </p:column>
                                            <p:column headerText="Acertos - Números">
                                                #{rl.qtdAcertosNumero}
                                            </p:column>
                                            <p:column headerText="Acertos - Bola Extra">
                                                #{rl.qtdAcertoBolaExtra}
                                            </p:column>
                                        </p:dataTable>
                                    </div>

                                    <script src="media/scripts/gameMount.js"/>
                                    <script>
                                        $(document).ready(function() {
                                            gameMount(1, #{managerResultado.loteria.limiteNumeros}, #{managerResultado.loteria.limiteBolaExtra});
                                        });
                    
                                        function setTicket(){
                                            var data = submitTicket();
                                            $('#formresultado\\:ticket').val(data);
                                        }
                    
                                    </script>
                                </p:panel>
                            </h:form>
                        </div>
                    </div>
                </div>
            </section>
        </ui:define>
    </ui:composition>
</html>
